<template>
  <div class="bac">
    <div class="logo">
      <!-- <img src="../assets/img/logo.png" alt /> -->
    </div>
    <div class="slogon">
      <h2>{{ systemName }}</h2>
    </div>
    <div class="login">
      <!-- 登陆卡片 -->
      <el-card>
        <el-form
          ref="loginFormRef"
          :model="loginForm"
          :rules="loginFormRules"
          @submit.native.prevent
        >
          <el-form-item label="用户名" prop="user_name">
            <el-input
              v-model="loginForm.user_name"
              prefix-icon="el-icon-user-solid"
              >></el-input
            >
          </el-form-item>
          <el-form-item label="密码" prop="pass_word">
            <el-input
              type="password"
              v-model="loginForm.pass_word"
              prefix-icon="el-icon-key"
              >></el-input
            >
          </el-form-item>
          <el-form-item class="btns mt-5 text-center">
            <el-row>
              <el-col :span="12">
                <el-button
                  class="w-60"
                  type="primary"
                  native-type="submit"
                  @click="login"
                  >登录</el-button
                ></el-col
              >
              <el-col :span="12">
                <el-button class="w-60" type="info" @click="resetLoginForm"
                  >重置</el-button
                >
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import defaultSettings from "@/settings";
export default {
  data() {
    return {
      systemName: defaultSettings.systemName,
      loginForm: {
        user_name: "admin",
        pass_word: "z147258",
      },
      // 表单验证
      loginFormRules: {
        user_name: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 15,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        pass_word: [
          { required: true, message: "请输入用户密码", trigger: "blur" },
          {
            min: 6,
            max: 18,
            message: "长度在 6 到 18 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {},
  created() {},
  methods: {
    async login() {
      // 表单预验证

      this.$refs.loginFormRef.validate(async (valid) => {
        if (!valid) return;
        // const { data: res } = await this.$http.post("login", this.loginForm);
        let res = {
          status: 200,
          message: "登录成功!",
        };
        //状态码 判断 登陆是否成功
        if (res.status !== 200) {
          this.$refs.loginFormRef.resetFields();
          this.$message.error(res.message);
        } else {
          //   window.localStorage.setItem("token", res.data.token);
          //   window.localStorage.setItem("user", res.data.userInfo.user_name);
          setTimeout(() => {
            window.sessionStorage.setItem("token", "1122");
            this.$message.success(" 登陆成功 !");
            this.$router.push(this.$route.query.redirect || "/");
          }, 1500);
        }

        // 1.2 token 只应在当前网站打开期间生效，所以将token保存在localStorage中
      });
      // console.log(this.loginForm.username)
      // this.$message.success("正在登陆，请稍等....")
    },
    resetLoginForm() {
      if (this.loginForm.user_name && this.loginForm.pass_word) {
        this.$message.warning("用户重置登陆信息");
        this.$refs.loginFormRef.resetFields();
      } else {
        this.$message.error("请确认登陆信息");
      }
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped >
.bac {
  position: relative;
  height: 100vh;
  min-width: 1000px;
  width: 100vw;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../assets/img/beijing.jpg);

  .login {
    position: absolute;
    width: 600px;
    height: 330px;
    top: 40%;
    margin-left: 50%;
    transform: translateX(-50%);
    // right: 15%;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 100px;
    // background: rgb(230, 230, 230);
    background: rgb(230, 230, 230);
    font-weight: bold;
    .el-card {
      height: 100%;
      background-color: #e6e6e6;
    }
    .btns {
      //   background-color: wheat;
    }
  }
}
.slogon {
  position: absolute;
  color: white;
  font-size: 38px;
  top: 15%;
  text-align: center;
  width: 100%;
}
.logo {
  position: absolute;
  background-color: white;
  height: 80px;
  border-radius: 100%;
  top: 14%;
  left: 5%;
  img {
    height: 100%;
  }
}
</style>

